<template>
  <uni-popup type="bottom" background-color="#fff" ref="customColumnsRef" @change="popChange">
    <view class="header-wrap">
      <text>自定义列</text>
      <uni-icons class="close-icon" size="20" :color="'#CCCCCC'" type="closeempty"
        @click="closeCustomColumns"></uni-icons>
    </view>
    <view class="columns-wrap">
      <view :key="column.name" v-for="column in columnList" @click="checkBoxChange(column)">
        <view>
          <image :src="column.hidden ? uncheckImg : checkImg" style="width: 30rpx; height: 30rpx"></image>
          <text>{{ column.label }}</text>
        </view>
        <view class="operate-wrap">
          <view v-if="!isSort(column.name)" class="sort-wrap" @click.stop="sortChange(column)">
            <image :src="column.sorter ? activeSortIcon : sortIcon" />
            <text :style="{ color: column.sorter ? '#409eff' : '#b1b3b8' }">排序
            </text>
          </view>
          <view class="fixed-wrap" @click.stop="fixedChange(column)">
            <image :src="column.fixed ? activeFixedIcon : fixedIcon" />
            <text :style="{ color: column.fixed ? '#409eff' : '#b1b3b8' }">固定
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer-wrap">
      <button class="cancel" @click="recoverDefault">恢复默认</button>
      <button type="primary" @click="saveColumns">保存</button>
    </view>
  </uni-popup>
</template>
<script>
  import config from '@/config';
  import { toast } from '@/utils/common';
  import { getCustomColumns, saveCustomColumn } from '@/api/colliery.js';
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      hiddenSort: {
        type: Array,
        default: []
      }
    },
    watch: {
      async show(val) {
        if (val) {
          await this.getCustomColumns();
          this.$refs.customColumnsRef?.open('bottom');
        } else {
          this.$refs.customColumnsRef?.close();
        }
      }
    },
    computed: {
      checkImg() {
        return config.baseImgUrl + '/checked.png';
      },
      uncheckImg() {
        return config.baseImgUrl + '/unchecked.png';
      },
      sortIcon() {
        return config.baseImgUrl + '/sort.png';
      },
      activeSortIcon() {
        return config.baseImgUrl + '/actice-sort.png';
      },
      fixedIcon() {
        return config.baseImgUrl + '/fixed.png';
      },
      activeFixedIcon() {
        return config.baseImgUrl + '/active-fixed.png';
      },
      isSort() {
        return (field) => {
          return this.hiddenSort.includes(field);
        };
      }
    },
    data() {
      return {
        columnList: []
      };
    },
    methods: {
      popChange(data) {
        this.$emit('openChange', {
          key: 'isOPenColumns',
          show: data.show
        });
      },
      checkBoxChange(column) {
        this.columnList = this.columnList.map((e) => {
          if (e.name === column.name) {
            e.hidden = !column.hidden;
          }
          return e;
        });
      },
      closeCustomColumns() {
        this.$refs.customColumnsRef?.close();
      },
      fixedChange(column) {
        this.columnList = this.columnList.map((e) => {
          if (e.name === column.name) {
            e.fixed = !column.fixed;
          }
          return e;
        });
      },
      sortChange(column) {
        this.columnList = this.columnList.map((e) => {
          if (e.name === column.name) {
            e.sorter = !column.sorter;
          }
          return e;
        });
      },
      async getCustomColumns() {
        const data = {
          menuType: 'coalBasicData'
        };
        const res = await getCustomColumns(data);
        if (res.code === 0) {
          this.columnList = res.data?.fieldAttributeList || [];
        } else {
          toast(res.msg);
        }
      },
      async recoverDefault() {
        const data = {
          restoreDefault: 1,
          menuType: 'coalBasicData',
          fieldAttributeList: this.columnList
        };
        const res = await saveCustomColumn(data);
        if (res.code === 0) {
          this.$emit('customChange');
          this.$refs.customColumnsRef?.close();
        } else {
          toast(res.msg);
        }
      },
      async saveColumns() {
        const data = {
          menuType: 'coalBasicData',
          fieldAttributeList: this.columnList
        };
        const res = await saveCustomColumn(data);
        if (res.code === 0) {
          this.$emit('customChange');
          this.$refs.customColumnsRef?.close();
        } else {
          toast(res.msg);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .header-wrap {
    text-align: center;
    padding: 12px;

    text {
      font-size: 14px;
      font-weight: bold;
    }

    .close-icon {
      position: absolute;
      right: 20px;
    }
  }

  .columns-wrap {
    padding: 12px;
    max-height: 450px;
    overflow-y: auto;
    background-color: #fafcff;

    >view+view {
      margin-top: 12px;
    }

    >view {
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f2f6fc;

      image {
        margin-right: 8px;
      }

      >view {
        display: flex;
        align-items: center;
      }

      .operate-wrap {
        display: flex;
        align-items: center;

        >view+view {
          margin-left: 10px;
        }
      }

      .sort-wrap,
      .fixed-wrap {
        display: flex;
        align-items: center;
        color: #b1b3b8;

        image {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .footer-wrap {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0 10px;

    button.cancel {
      border: 0 !important;
      color: #666666 !important;
      background-color: #eeeff2 !important;
    }

    button {
      width: 45%;
      height: 40px !important;
      font-size: 16px !important;
      margin: inherit !important;
      line-height: 40px !important;
    }

    button+button {
      margin-left: 12px !important;
    }
  }
</style>